<template>
    <div class="exam-ticket">
        <el-card>
            <div class="title"><h1>准考证</h1></div>
            <div class="ticket-info">
                <p><span>考生姓名：</span>{{ examTicket.name }}</p>
                <p><span>考生编号：</span>{{ examTicket.examineeId }}</p>
                <p><span>考试科目：</span>{{ examTicket.subject }}</p>
                <p><span>考试时间：</span>{{ examTicket.examTime }}</p>
                <p><span>考试地点：</span>{{ examTicket.examLocation }}</p>
            </div>
            <div class="ticket-actions">
                <el-button type="primary" @click="handlePrint">打印准考证</el-button>
            </div>
        </el-card>
    </div>
</template>

<script setup lang="ts">
import {ref} from 'vue';
import {ElButton, ElCard, ElMessage} from 'element-plus';

// 模拟的准考证数据
const examTicket = ref({
    name: '柯毕',
    examineeId: '8209220108',
    subject: '软件需求工程',
    examTime: '2024-07-20 10:00 - 11:40',
    examLocation: '校本部_科教南206'
});

const handlePrint = () => {
    // 调用浏览器的打印功能
    window.print();
    ElMessage.success('准考证打印中...');
};
</script>

<style scoped>
.exam-ticket {
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
}

.title {
    font-size: 24px;
    text-align: center;
    margin-bottom: 20px;
}

.ticket-info {
    margin-bottom: 20px;
}

.ticket-info p {
    margin: 10px 0;
    font-size: 16px;
}

.ticket-info span {
    font-weight: bold;
    margin-right: 10px;
}

.ticket-actions {
    text-align: center;
}
</style>